<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))
    const xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    const yDataArr = [1500, 1800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    // var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009]
    const option = {
      dataZoom: [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisIndex: [0],
        },
        {
          type: 'slider',
          show: true,
          yAxisIndex: [0],
        },
        {
          type: 'inside',
          yAxisIndex: [0],
        }
      ],
      title: {
        text: '康师傅',
        subtext: '数量'
      },
      xAxis: {
        tpye: 'category',
        data: xDataArr,
        // 紧挨边缘
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        // 差距较小时,从最小值开始 脱离0值比例
        scale: true
      },
      label: {
        show: true
      },
      legend: {
        data: ['康师傅销量']
      },
      series: [
        {
          name: '康师傅销量',
          data: yDataArr,
          type: 'line',
          // 最大值最小值
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          // 平均线
          markLine: {
            data: [
              { type: 'average' }
            ]
          },
          // 标注区间
          markArea: {
            data: [
              [
                { xAxis: '1月' },
                { xAxis: '2月' }
              ],
              [
                { xAxis: '7月' },
                { xAxis: '8月' }
              ]
            ]
          },
          // 平滑效果
          // smooth: true,
          // 线的风格
          lineStyle: {
            color: 'teal',
            // dashed 虚线 dotted点线 solid 实线
            type: 'solid'
          },
          // 填充风格
          areaStyle: {
            color: 'teal'
          },
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>